<template>
  <input
    :type="type"
    :placeholder="placeholder"
    :value="modelValue"
    :readonly="readonly"
    :unselectable="readonly"
    @input="handleInput"
  />
</template>

<script name="ItInput" setup>
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: 'text',
  },
})
const emits = defineEmits(['update:modelValue'])

const handleInput = (e) => {
  emits('update:modelValue', e.target.value)
}
</script>
<style scoped>
input {
  line-height: auto;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}
</style>
